import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Navigator,
    ListView,
    TouchableOpacity,
    RefreshControl
} from 'react-native';
import NavigationBar from './js/common/NavigationBar'
import Toast, {DURATION} from 'react-native-easy-toast'
let data = {
    "result": [
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
    ]
}
export default class ListViewTest extends Component {
    constructor(props) {
        super(props)
        const ds = new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2})

        this.state={
            dataSource: ds.cloneWithRows(data.result),
            isLoading: false
        }
        this.onLoad()
    }
    renderRow(item) {
        return  <TouchableOpacity
                    onPress={()=>{
                        this.toast.show('you pressed:' + item.fullName, DURATION.LENGTH_LONG)
                     }
                    }
                >
            <View style={styles.row}>
                <Text>{item.fullName}</Text>
                <Text>{item.email}</Text>
            </View>
        </TouchableOpacity>
    }
    renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
        return <View key={rowID} style={styles.line}></View>
    }
    renderFooter() {
        return <Image style={{width: 100, height: 100}} source={{uri: 'https://segmentfault.com/u/junezm'}}></Image>
    }
    onLoad() {
        setTimeout(()=> {
            this.state.isLoading = false
        }, 2000)
    }
    render() {
        return (
            <View style={styles.container}>
                <NavigationBar
                    title='fetch的使用'
                />
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={item => this.renderRow(item)}
                    renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
                    renderFooter={()=>this.renderFooter()}
                    refreshControl={<RefreshControl
                            refreshing={this.state.isLoading}
                            onRefresh={()=>this.onLoad()}
                        />
                    }
                />
                <Toast ref={toast=>{this.toast=toast}}/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        justifyContent: 'center'
    },
    text: {
        fontSize: 20
    },
    row: {
        height: 50
    },
    line: {
        height: 1,
        backgroundColor: 'black'
    }
});